<input type="hidden" class="tpl-form-input" id="news-id" name="news.id" value="#(news.id??)">
<div class="am-form-group">
    <label class="am-u-sm-3 am-form-label">封面图 <span class="tpl-form-line-small-title">cover</span></label>
    <div class="am-u-sm-9">
        <div class="am-form-group am-form-file">
            <img class="" style="width: 200px;height: 150px;" alt="点击图片上传" id="up-img-touch" onerror="this.src='/admin/common/AmazeUI/img/k.jpg'" src="#(news.cover??)" data-am-popover="{content: '点击上传', trigger: 'hover focus'}" >
            <input type="hidden" class="tpl-form-input" id="img-save-path" name="news.cover" value="#(news.cover??)" />
        </div>
    </div>
</div>
<div class="am-form-group">
    <label for="news-title" class="am-u-sm-3 am-form-label">标题 <span class="tpl-form-line-small-title">title</span></label>
    <div class="am-u-sm-9">
        <input type="text" class="tpl-form-input" id="news-title" name="news.title" value="#(news.title??)" placeholder="请输入新闻标题">
        <small>#(titleMsg)</small>
    </div>
</div>
<div class="am-form-group">
    <label for="news-time" class="am-u-sm-3 am-form-label">发布时间 <span class="tpl-form-line-small-title">time</span></label>
    <div class="am-u-sm-9">
        <link rel="stylesheet" href="/admin/common/DatetimePicker/css/amazeui.datetimepicker.css"/>
        <script src="/admin/common/DatetimePicker/js/amazeui.datetimepicker.min.js"></script>
        <script src="/admin/common/DatetimePicker/js/locales/amazeui.datetimepicker.zh-CN.js" charset="UTF-8"></script>

        <input type="text" class="am-form-field tpl-form-no-bg" id="news-time" name="news.time" value="#(news.time??)" readonly="" placeholder="发布时间">
        <script type="text/javascript">
            $(function () {
                var timeDom = $('#news-time');
                var datetime = timeDom.val();
                timeDom.datetimepicker({
                    language:  'zh-CN',
                    format:'yyyy-mm-dd hh:ii',
                    todayBtn:true,
                    todayHighlight:true,
                    autoclose:true,
                    forceParse:true
                });
                if(datetime == '')
                    timeDom.datetimepicker('update', new Date());
            });
        </script>
    </div>
</div>
<div class="am-form-group">
    <label for="news-channel" class="am-u-sm-3 am-form-label">频道 <span class="tpl-form-line-small-title">channel</span></label>
    <div class="am-u-sm-9">
        <select id="news-channel" name="news.channel" data-am-selected="{searchBox: 0}" style="display: none;">
            #for(c : channels)
                <option value=#(c.value) #(c.value.toInt()==news.channel?'selected':'')>#(c.name)</option>
            #end
        </select>
    </div>
</div>
<div class="am-form-group">
    <label for="news-introduction" class="am-u-sm-3 am-form-label">简介 <span class="tpl-form-line-small-title">introduction</span></label>
    <div class="am-u-sm-9">
        <textarea class="" rows="10" id="news-introduction" name="news.introduction" placeholder="请输入简介">#(news.introduction??)</textarea>
    </div>
</div>
<div class="am-form-group">
    <label for="news-type" class="am-u-sm-3 am-form-label">类型 <span class="tpl-form-line-small-title">type</span></label>
    <div class="am-u-sm-9">
        <select id="news-type" name="news.type" data-am-selected="{searchBox: 0}" style="display: none;">
            <option value=1 #(news.type==1?'selected':'')>直接渲染</option>
            <option value=2 #(news.type==2?'selected':'')>模板</option>
            <option value=3 #(news.type==3?'selected':'')>链接</option>
        </select>

        <script>
            $(function () {
                var $typeDom = $('#news-type');
                var savedType = '#(news.type??)';
                $typeDom.change(function () {
                    var type = $(this).val();
                    switchToType(type);
                });
                if(savedType != '')
                    switchToType(savedType);
                else
                    switchToType('1');

            });

            var switchToType = function (type) {
                switch(type)
                {
                    case '1':
                        toType1();
                        break;
                    case '2':
                        toType2();
                        break;
                    case '3':
                        toType3();
                        break;
                }
            };

            var toType1 = function () {
                $('#template-div').addClass('hide-area');
                $('#link-div').addClass('hide-area');
                $('#content-div').removeClass('hide-area');
            };

            var toType2 = function () {
                $('#template-div').removeClass('hide-area');
                $('#link-div').addClass('hide-area');
                $('#content-div').removeClass('hide-area');
            };

            var toType3 = function () {
                $('#template-div').addClass('hide-area');
                $('#link-div').removeClass('hide-area');
                $('#content-div').addClass('hide-area');
            };
        </script>
    </div>
</div>
<div class="am-form-group" id="template-div">
    <label for="news-template-id" class="am-u-sm-3 am-form-label">模板 <span class="tpl-form-line-small-title">template</span></label>
    <div class="am-u-sm-9">
        <select id="news-template-id" name="news.template_id" data-am-selected="{searchBox: 0}" style="display: none;">
            #for(t : templateList)
                <option value=#(t.id) #(t.id==news.templateId?'selected':'')>#(t.name)</option>
            #end
        </select>
    </div>
</div>
<div class="am-form-group" id="link-div">
    <label for="news-link" class="am-u-sm-3 am-form-label">链接 <span class="tpl-form-line-small-title">link</span></label>
    <div class="am-u-sm-9">
        <input type="text" class="tpl-form-input" id="news-link" name="news.link" value="#(news.link??)" placeholder="请输入链接">
    </div>
</div>
<div class="am-form-group" id="content-div">
    <label for="news-content" class="am-u-sm-3 am-form-label">内容 <span class="tpl-form-line-small-title">content</span></label>
    <div class="am-u-sm-9">
        <textarea id="news-content" name="news.content" style="display: none">#(news.content??)</textarea>

        <div id="richText">#(news.content??)</div>
        <script type="text/javascript" src="/admin/common/WangEditor3/wangEditor.min.js"></script>
        <script type="text/javascript">
            var E = window.wangEditor;
            var editor = new E('#richText');
            editor.customConfig.onchange = function (html) {
                // html 即变化之后的内容
                $('#news-content').val(html);
            };
            editor.customConfig.customAlert = function (info) {
                layer.msg(info);
            };
            editor.customConfig.uploadImgServer = '/admin/fileUpload/imageUpload';
            editor.customConfig.uploadFileName = "image";
            editor.customConfig.uploadImgHooks = {
                before: function (xhr, editor, files) {
                    // 图片上传之前触发
                    // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件

                    // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
                    // return {
                    //     prevent: true,
                    //     msg: '放弃上传'
                    // }
                },
                success: function (xhr, editor, result) {
                    // 图片上传并返回结果，图片插入成功之后触发
                    // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
                },
                fail: function (xhr, editor, result) {
                    // 图片上传并返回结果，但图片插入错误时触发
                    // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
                },
                error: function (xhr, editor) {
                    // 图片上传出错时触发
                    // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
                },
                timeout: function (xhr, editor) {
                    // 图片上传超时时触发
                    // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
                },

                // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
                // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
                customInsert: function (insertImg, result, editor) {
                    // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
                    // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

                    // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
                    var url = result.url;
                    var path = result.path;
                    insertImg(path+url);
                }
            };
            editor.create();
        </script>
    </div>
</div>

<div class="am-form-group">
    <label for="news-status" class="am-u-sm-3 am-form-label">状态 <span class="tpl-form-line-small-title">status</span></label>
    <div class="am-u-sm-9">
        <select id="news-status" name="news.status" data-am-selected="{searchBox: 0}" style="display: none;">
            <option value=1 #(news.status==1?'selected':'')>草稿</option>
            <option value=2 #(news.status==2?'selected':'')>发布</option>
            <option value=3 #(news.status==3?'selected':'')>下线</option>
        </select>
    </div>
</div>

<div class="am-form-group">
    <label for="news-top" class="am-u-sm-3 am-form-label">是否置顶 <span class="tpl-form-line-small-title">top</span></label>
    <div class="am-u-sm-9">
        <input type="hidden" class="tpl-form-input" id="news-top" name="news.top" value="#(news.top??)">

        <div class="tpl-switch">
            <input type="checkbox" #(news.top?'checked':'') id="check-top" class="ios-switch bigswitch tpl-switch-btn" >
            <div class="tpl-switch-btn-view">
                <div>
                </div>
            </div>
        </div>
        <script>
            $(function () {
                if($('#news-top').val() == '')
                    $('#news-top').val(false);
               $('#check-top').click(function () {
                   if($('#check-top').is(':checked'))
                       $('#news-top').val(true);
                   else
                       $('#news-top').val(false);
               })
            });
        </script>
    </div>
</div>

<div class="am-form-group">
    <div class="am-u-sm-9 am-u-sm-push-3">
        <button type="submit" class="am-btn am-btn-primary tpl-btn-bg-color-success ">提交</button>
    </div>
</div>